<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        {{JS表达式}}
     -->
     <div id="app">
        <h3>1、{{}}双大括号输出文本内容</h3>
        <!-- 文本内容 -->
        <p>{{message}}</p>
        <!-- JS表达式 -->
        <p>{{score + 1}}</p>
        <h3>2、 一次性插值 v-once </h3>
        <span v-once>{{message}}</span>
        <h3>3、指令输出真正的 HTML 内容 v-html</h3>
        <p>双大括号：{{contentHtml}}</p>
        <!-- 
             v-html: 
             1. 如果输出的内容是HTML数据，双大括号将数据以普通文本方式进行输出，
             为了输出真正ＨＴＭＬ的效果，就需要使用v-html 指定
             2. 为了防止 XSS 攻击

         -->
        <p>v-html: <span v-html="contentHtml"></span></p>
        <h3>4、元素绑定指令 v-bind</h3>
        <img v-bind:src="imgUrl">
        <img :src="imgUrl">
        <a :href="mxgUrl">跳转</a>
        <h3>5、事件绑定指令 v-on</h3>
        <input type="text" value="1" v-model="num">
        <button @click="add">点击+1</button>
     </div>
     <script src="./node_modules/vue/dist/vue.js"></script>
     <script>
         var vm = new Vue({
             el:'#app',
             data:{
                message:'mengxuegu',
                score: 100,
                contentHtml: `<span style="color:red">此内容为红色字体
                    <script>alert('hello mxg')<\/script>
                    </span>`,
                imgUrl: 'https://cn.vuejs.org/images/logo.png',
                mxgUrl: 'http://www.mengxuegu.com',
                num: 10
             },
             methods: { // 指定事件处理函数 v-on:事件名="函数名" 来进行调用
                add: function() { //定义了add函数
                    console.log('add被调用')
                    this.num ++
                }
            }
         })
     </script>
</body>
</html>